<template>
	<view class="wanl-order-list">
		<scroll-view scroll-x="true">
			<view class="navbar">
				<view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state"
					:class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
					{{ item.text }}
				</view>
			</view>
		</scroll-view>

		<swiper :current="tabCurrentIndex" style="height: calc(100% - 80rpx)" duration="300" @change="changeTab">

			<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.state">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<view style="display: flex; flex-direction: column; align-items: stretch">

						<!-- 空白页 -->
						<wanl-empty text="没有找到任何订单" v-if="tag.loaded === true && tag.orderList.length === 0" />

						<!-- 退款页 -->
						<view v-if="pdState == 5" class="wanl-order-list">
							<view class="edgeInsetTop"> </view>
							<view class="order-item radius-bock" style="
                  padding: 0 3.2vw;
                  box-shadow: 0px 0px 0.8vw 0px rgba(0, 0, 0, 0.1);
				  padding-bottom: 25rpx;
                " v-for="(item, index) in dataList" :key="item.id">
								<view class="head">
									<view class="bianhao" style="font-size: 22rpx;"> 订单编号： {{ item.order_no}}</view>
									<view class="text-lg">
										<text class="text-sm"
											style="color: #666666; font-size: 22rpx;">{{ item.type_text }}</text>
									</view>
								</view>
								<!-- 商品 -->
								<view style="padding-top: 0;" class="goods-box" @tap="onRefund(item.id)">
									<view class="cu-avatar xl margin-right-bj radius"
										:style="{backgroundImage:'url(' + $wanlshop.oss(item.goods.image, 70, 70) + ')',marginRight: '16rpx'}">
									</view>
									<view class="content margin-right-bj padding-bottom-xs padding-top-xs">
										<view class="describe">
											<view class="text-cut-2 wanl-black" style="color: black; font-size: 28rpx;">
												{{ item.goods.title }}
											</view>
											<view class="text-sm margin-top-xs wanl-gray-light"
												style="font-size: 24rpx;">
												{{ item.goods.difference }}
											</view>
											<view class="text-sm margin-top-xs wanl-black" style="color: black">
												退款：<text class="text-price">{{ item.price }}</text>
											</view>
										</view>
									</view>
								</view>
								<!-- 底部 -->
								<view class="bg-bgcolor padding-bj radius text-cente wanl-gray-light"
									style="margin-top: 14rpx;margin-bottom: 14rpx; font-size: 24rpx;">
									<text style="color: red; font-size: 24rpx;"
										class="margin-lr-bj wanl-black">{{ getStateText(item.state) }}</text>
									{{ getStateInfo(item.state) }}
								</view>
								<!-- 1.0.2升级 售后列表完成退款项目显示关闭按钮 -->
								<view class="action-box">
									<button
										style="font-size: 26rpx; height: 60rpx; border-radius: 48rpx; background: #ffffff; border: 1rpx solid #E4E7ED;"
										class="margin-bj" v-if="
                    item.state == 0 ||
                    item.state == 1 ||
                    item.state == 2 ||
                    item.state == 3 ||
                    item.state == 6
                  " @tap="closeRefund(index)">
										关闭退款
									</button>
									<button v-if="item.state == 5" @tap="deleteRefund(index)"
										style="font-size: 26rpx; height: 60rpx; border-radius: 48rpx; background: #ffffff; border: 1rpx solid #E4E7ED;"
										class="margin-bj mr10">删除记录</button>
									<button style="font-size: 26rpx; margin: 0rpx" class="look-detail"
										@tap="onRefund(item.id)">
										查看详情
									</button>
								</view>
							</view>

							<view v-if="dataList.length == 0">
								<wanl-empty text="没有任何退款售后" />
							</view>
							<view class="edgeInsetBottom"></view>
							<uni-load-more :status="status" :content-text="contentText" />
						</view>
						<OrderCard v-else v-for="(order, okey) in tag.orderList" :key="order.id" :order='order'
							:index="okey" @deleteOrder="deleteOrder" @changeOrder="changeOrder"
							@toDetail="(order)=>orderDetails(order.id)" @onShop="(order)=>onShop(order.shop_id)"
							:showUseBtn="tag && tag.state != 2">
							<template #btn>
								<!-- 待付款 -->
								<view v-if="order.state == 1" class="btn-container">
									<button @tap.stop="editAddress(order.id, order)" class="margin-bj"
										:style="{ border: '2rpx solid #E4E7ED', color: '#3d3d3d', background: '#fff', height: '60rpx', fontSize: '26rpx'}">修改地址</button>
									<button @tap.stop="cancelOrdera(order)" class="margin-bj"
										:style="{ border: '2rpx solid #E4E7ED', color: '#3d3d3d', background: '#fff', height: '60rpx', fontSize: '26rpx'}">取消订单</button>
									<button @tap.stop="paymentOrder(order.id)" class="margin-bj"
										:style="{ background: '#fd8c00', color: '#fff', border: 'none', height: '60rpx', fontSize: '26rpx'}">立即支付</button>
									<button v-if="order.invoicable" @tap.stop="payMentPost(order)"
										class="margin-bg">申请开票</button>
								</view>
								<!-- 待发货 -->
								<view v-else-if="order.state==2" class="btn-container">
									<button @tap.stop="toChat(order.shop_id)" class="margin-bj"
										:style="{ border: '2rpx solid #E4E7ED', color: '#3d3d3d', background: '#fff', height: '60rpx', fontSize: '26rpx'}">催发货</button>
									<button v-if="order.invoicable" @tap.stop="payMentPost(order)"
										class="margin-bg">申请开票</button>
									<button @tap.stop="editAddress(order.id, order)" class="margin-bgg"
										:style="{ border: '2rpx solid #fd8c00', color:'#fd8c00', background: '#fff6ed', height: '60rpx', fontSize: '26rpx'}">修改地址</button>
								</view>
								<!-- 待收货 -->
								<view class="action-box btn-container" v-else-if="order.state == 3">
									<button @tap.stop="onLogistics(order.id)" class="margin-bj"
										:style="{ border: '2rpx solid #E4E7ED', color: '#3D3D3D', background: '#ffffff', height: '60rpx', fontSize: '26rpx'}">查看物流</button>
									<button @tap.stop="ConfirmReceipt(order)" class="margin-bgg"
										style="background: #fd8c00; color: #fff; height: 60rpx;font-Size: 26rpx">确认收货</button>
								</view>
								<!-- 待使用 -->
								<view class="action-box btn-container" v-else-if="order.state == 8">
									<button @tap.stop="onLogistics(order.id)" class="margin-bj"
										:style="{ border: '1rpx solid #E4E7ED', color: '#3D3D3D', background: '#ffffff', height: '60rpx', fontSize: '26rpx'}">查看物流</button>
									<button v-if="getGoodStatus(order).indexOf(1) > -1"
										@tap.stop="orderQrCode(order.id)" class="margin-bj"
										style="background: #fd8c00; color: #fff; height: 60rpx; font-Size: 26rpx">立即预约</button>

									<button disabled @tap.stop="ConfirmReceipt(order)" class="margin-bgg"
										style="background: #fd8c00; color: #fff; height: 60rpx;font-Size: 26rpx">已收货</button>
								</view>
								<!-- 待评价 -->
								<view class="action-box btn-container" v-else-if="order.state == 4">
									<button @tap.stop="commentOrder(order)" class="margin-bj"
										style="padding: 0vw 26rpx; background: #fd8c00; color: #fff; height: 60rpx; margin: 0;font-size: 26rpx;">立即评价</button>
								</view>
							</template>
						</OrderCard>
					</view>
					<!-- <uni-load-more :status="tag.loadingType" :content-text="contentText" /> -->
					<view class="edgeInsetBottom"></view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 确认收货 -->
		<view class="cu-modal couponModal" :class="modalName == '确认收货' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog bg-bgcolor" @tap.stop="">
				<view class="wanl-modal">
					<view class="head padding-bj" style="background: #fc8b00;">
						<view class="content">
							<view class="text-white">提示</view>
						</view>
						<view class="close wlIcon-31guanbi text-white" @tap="hideModal"></view>
					</view>
					<scroll-view class="model-box text-left" scroll-y="true">
						<view class="mb10">1.如果产品严重破损，请据签收；</view>
						<view class="mb10">2.一旦确认收货，表示对产品无任何异议；</view>
						<view>3.确认收货之后，不再接受退货。</view>
					</scroll-view>
					<view class="foot padding-lr-bj">
						<view class="flex w100P">
							<view class="flex-1 ml10 mr10">
								<button class="cu-btn w100P round text-bold complete" @tap="hideModal">取消</button>
							</view>
							<view class="flex-1 ml10 mr10">
								<button class="cu-btn w100P round text-bold complete text-white"
									style="background-color:#fd8c00;" @tap="confirmOrder">确认收货</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 取消订单 -->
		<view class="cu-modal couponModal" :class="modalName == '取消订单' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog bg-bgcolor" @tap.stop="">
				<view class="wanl-modal">
					<view class="head padding-bj" style="background: #fc8b00;">
						<view class="content">
							<view class="text-white">提示</view>
						</view>
						<view class="close wlIcon-31guanbi text-white" @tap="hideModal"></view>
					</view>
					<scroll-view class="model-box text-left" scroll-y="true">
						<view class="mb10">订单取消后无法恢复，确认取消？</view>
					</scroll-view>
					<view class="foot padding-lr-bj">
						<view class="flex w100P">
							<view class="flex-1 ml10 mr10">
								<button class="cu-btn w100P round text-bold complete" @tap="hideModal">取消</button>
							</view>
							<view class="flex-1 ml10 mr10">
								<button class="cu-btn w100P round text-bold complete text-white"
									style="background-color:#fd8c00;" @tap="cancelOrder">确认</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import OrderCard from '@/components/order-card/index.vue'
	export default {
		data() {
			return {
				currentRow: {},
				modalName: null,
				dataList: [],
				reload: false, //判断是否上拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: "more",
				contentText: {
					contentdown: " ",
					contentrefresh: "加载中",
					contentnomore: "",
				},

				pdState: null,

				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: "全部",
						loadingType: "more",
						current_page: 1,
						orderList: [],
						width: "40rpx",
					},
					{
						state: 1,
						text: "待付款",
						loadingType: "more",
						current_page: 1,
						orderList: [],
						width: "40rpx",
					},
					{
						state: 2,
						text: "待发货",
						loadingType: "more",
						current_page: 1,
						orderList: [],
						width: "40rpx",
					},
					{
						state: '3,8',
						text: "待收货/待使用",
						loadingType: "more",
						current_page: 1,
						orderList: [],
						width: "300rpx",
					},
					{
						state: 4,
						text: "待评价",
						loadingType: "more",
						current_page: 1,
						orderList: [],
						width: "40rpx",
					},
					{
						state: 5,
						text: "退款/售后",
						loadingType: "more",
						current_page: 1,
						orderList: [],
						width: "40rpx",
					},
				],
				contentText: {
					contentdown: " ",
					contentrefresh: "正在加载...",
					contentnomore: "",
				},
			};
		},
		components: {
			OrderCard
		},
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = "noMore";
			} else {
				this.reload = false;
				this.current_page = this.current_page + 1; //页码+1
				this.status = "loading";
				this.loadData();
			}
		},
		onLoad(options) {
			this.pdState = options.state;
			if (!options.state) {
				options.state = 0;
			}
			this.tabCurrentIndex = +options.state;
			// #ifndef MP
			// this.loadData();
			// this.loadDataa();
			// #endif
			// #ifdef MP

			// #endif
		},
		onShow(options) {
			// this.navList = []
			this.current_page = 1;
			this.reload = true;

			if (this.pdState == 5) {
				this.loadDataa();
			} else {
				this.loadData("tabChange");
			}
			console.log('current_page huilail ')
		},
		methods: {
			// 预约状态
			goodStatus(order) {
				return order.goods.find(item => item.service_status)?.service_status
			},
			getGoodStatus(order) {
				let service_status_list = order.goods.map(item => +item.service_status)
				return service_status_list
			},
			toReservationStatus(order) {
				if (order) {

					let good = order.goods.find(item => item.service_status === '2')
					console.log(good)
					this.reservationStatus(order.id, good.id)
				}
			},
			payMentPost(order) {
				let info = {
					order_no: order.order_no,
					order_id: order.id,
					shop_id: order.shop_id,
					price: order.pay.price,
				};
				uni.setStorage({
					key: "order_info",
					data: JSON.stringify(info),
					success: function() {
						console.log("存储成功");
					},
				});
				this.$wanlshop.to(`/pages/invoice/list`);
			},

			// 倒计时结束后

			async loadDataa() {
				this.$api.post({
					url: "/wanlshop/refund/refundList",
					data: {
						page: this.current_page,
					},
					success: (res) => {
						// uni.stopPullDownRefresh();
						// console.log(this.dataList , res.data)

						this.dataList = res.data;

						// this.dataList = this.reload ? res.data : this.dataList.concat(res.data); //数据 追加

						this.total = res.total; //数据量
						this.current_page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
						this.status = res.total == 0 ? "noMore" : "more";
					},
				});
			},
			// 关闭退款
			async closeRefund(index) {
				let refund = this.dataList[index];
				this.$api.get({
					url: "/wanlshop/refund/closeRefund",
					data: {
						id: refund.id,
					},
					success: (res) => {
						this.$store.commit("statistics/order", {
							customer: this.$store.state.statistics.order.customer - 1,
						});
						this.reloadPageData()
						this.$wanlshop.msg("退款已关闭");
					},
				});
			},
			reloadPageData() {
				this.current_page = 1;
				this.reload = true;
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				this.$set(navItem, "loadingType", 'more');
				this.$set(navItem, "current_page", 1);
				this.$set(navItem, "orderList", []);
				this.$set(navItem, "loaded", false);
				if (this.pdState == 5) {
					this.dataList = []
					this.loadDataa();
				} else {
					this.loadData("tabChange");
				}
			},
			// 删除记录
			async deleteRefund(index) {
				let refund = this.dataList[index];
				this.$api.post({
					url: "/wanlshop/order/delOrder",
					data: {
						id: refund.id,
					},
					success: (res) => {
						this.reloadPageData()
						this.$wanlshop.msg("删除成功");
					},
				});
			},
			getStateText(state) {
				return [
					"等待卖家同意",
					"等待买家退货",
					"卖家拒绝退款",
					"平台介入",
					"退款完成",
					"退款关闭",
					"等待卖家签收退货",
				][state];
			},
			getStateInfo(state) {
				return [
					"成功发起退款等待卖家同意",
					"卖家已同意，请退货",
					"您可以修改退货申请再次发起",
					"已申请平台介入，请等待平台判定",
					"退款完成",
					"您已关闭退款申请",
					"等待商家收到货物并退款给您",
				][state];
			},
			onRefund(id) {
				this.$wanlshop.to(`/pages/user/refund/details?id=${id}`);
			},

			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				if (navItem.loadingType === "loading") { // 状态判断就应该放最上方呢
					return;
				}
				if (source === 'tabChange') { // 如果是tab切换，应该获取最新的内容才对！！！，下拉就不需要
					this.$set(navItem, "loadingType", 'more');
					this.$set(navItem, "current_page", 1);
					this.$set(navItem, "orderList", []);
					this.$set(navItem, "loaded", false);
				}
				//判断是否最后一页
				if (navItem.loadingType == "noMore") {
					return;
				}
				//tab切换只有第一次需要加载数据
				if (source === "tabChange" && navItem.loaded === true) {
					return;
				}
				//防止重复加载
				this.$set(navItem, "loadingType", 'loading');
				// 获取列表
				if (this.pdState != 5) {
					this.$api.get({
						url: `/wanlshop/order/getOrderList?state=${state}&page=${navItem.current_page}`,
						// data: {
						//   state: state,
						//   page: navItem.current_page,
						// },
						success: (res) => {
							console.log(res, '刚才打印的');

							navItem.current_page = res.current_page; //当前页码
							if (res.last_page === res.current_page) {
								this.$set(navItem, "loadingType", 'noMore');
							} else {
								this.$set(navItem, "loadingType", 'more');
								navItem.current_page++;
							}
							/* let orderList = res.data.filter((item) => {
								//添加不同状态下订单的表现形式
								item = Object.assign(item, this.orderStateExp(item.state));
								//演示数据所以自己进行状态筛选
								if (state === 0) {
									//0为全部订单
									return item;
								}
								return String(state).includes(item.state);
							}); */
							let orderList = res.data;
							orderList.forEach(item => {
								item = Object.assign(item, this.orderStateExp(item.state));
							})
							orderList.forEach((item) => {
								item.isOpen = false;
								// if (item.state != 1 && item.state != 7) {
								if (item.state == 4 || item.state == 6 || item.state == 9) {
									item.isMore = true;
								}
								navItem.orderList.push(item);
							});
							console.log(orderList)
							//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
							this.$set(navItem, "loaded", true);
						},
					});
				}
			},
			//swiper 切换
			changeTab(e) {
				// this.$forceUpdate();
				this.tabCurrentIndex = e.target.current;
				this.pdState = e.target.current;
				// this.loadData('tabChange');
				if (e.target.current == 5) {
					this.loadDataa("tabChange");
				} else {
					this.loadData("tabChange");
				}
			},
			//顶部tab点击
			tabClick(index) {
				this.pdState = index;
				this.tabCurrentIndex = index;
			},
			// 修改订单
			changeOrder(order_id, bool) {
				this.navList[this.tabCurrentIndex].orderList.map(item => {
					if (item.id == order_id) {
						item.isOpen = bool;
					} else {
						item.isOpen = false;
					}
				})
			},
			//删除订单
			deleteOrder(order_id, key) {
				console.log(order_id, key)
				uni.showLoading({
					title: "请稍后",
				});
				/* this.$wanlshop.msg('删除成功')
				this.navList[this.tabCurrentIndex].orderList.splice(key, 1); */
				this.$api.post({
					url: "/wanlshop/order/delOrder",
					data: {
						id: order_id,
					},
					success: (res) => {
						this.navList[this.tabCurrentIndex].orderList.splice(key, 1);
						this.$wanlshop.msg('删除成功')
						uni.hideLoading();
					},
				});
			},
			cancelOrdera(item) {
				this.showModal('取消订单', item)
			},

			//取消订单- 设置为7 -全局
			cancelOrder() {
				let item = this.currentRow;
				uni.showLoading({
					title: "请稍后",
				});
				// 获取列表
				this.$api.post({
					url: "/wanlshop/order/cancelOrder",
					data: {
						id: item.id,
					},
					success: (res) => {
						let {
							stateTip,
							stateTipColor
						} = this.orderStateExp(7);
						item = Object.assign(item, {
							state: 7,
							stateTip,
							stateTipColor,
						});
						this.$store.commit("statistics/order", {
							pay: this.$store.state.statistics.order.pay - 1,
							whole: this.$store.state.statistics.order.whole - 1,
						});
						// 取消订单后删除待付款中该项，并修改全部中的状态 1.0.2升级
						let list = this.navList[1].orderList;
						let index = list.findIndex((val) => val.id === item.id);
						index !== -1 && list.splice(index, 1);
						// 删除后修改全部中的为7
						if (this.tabCurrentIndex == 1) {
							let list = this.navList[0].orderList;
							let index = list.findIndex((val) => val.id === item.id);
							if (index !== -1) {
								list[index].state = 7;
							}
						}
						uni.hideLoading();
						this.hideModal('取消订单')
					},
				});
			},
			// 弹出层
			showModal(name, row) {
				this.currentRow = row
				this.modalName = name;
			},
			// 关闭弹出层
			hideModal(name) {
				if (name) {
					this.showModal(name, this.currentRow);
				} else {
					this.modalName = null;
				}
			},
			/** 确认收货弹窗 */
			ConfirmReceipt(order) {
				this.showModal('确认收货', order)
			},
			commentOrder(order) {
				let orderGoodsId = order.goods.map(item => item.goods_id).join()
				this.$wanlshop.to(`/pages/user/order/evaluate?orderId=${order.id}&type=order`);
			},
			//支付订单
			paymentOrder(id) {
				this.$wanlshop.to(
					`/pages/user/money/pay?order_id=${id}&order_type=goods`
				);
			},
			//确认收货- 全局
			confirmOrder() {
				let item = this.currentRow
				uni.showLoading({
					title: "请稍后",
				});
				// 获取列表
				this.$api.post({
					url: "/wanlshop/order/confirmOrder",
					data: {
						id: item.id,
					},
					success: (res) => {
						let {
							stateTip,
							stateTipColor
						} = this.orderStateExp(4);
						let state = 4
						// 存在到店服务
						if (item.state && item.goods.find(item => item.store_id)) {
							state = 8
						}
						item = Object.assign(item, {
							state: state,
							stateTip,
							stateTipColor,
						});
						this.$store.commit("statistics/order", {
							receiving: this.$store.state.statistics.order.receiving - 1,
							evaluate: this.$store.state.statistics.order.evaluate + 1,
						});
						// this.$wanlshop.msg("收货成功");
						uni.hideLoading();
						this.hideModal()
						// TODO： 跳转收货成功界面
						uni.navigateTo({
							url: 'received?orderId=' + item.id
						})
					},
				});
			},
			//订单状态文字和颜色
			orderStateExp(state) {
				let stateTip = "",
					stateTipColor = "#333";
				switch (+state) {
					case 1:
						stateTip = "待付款";
						stateTipColor = "red";
						break;
					case 2:
						stateTip = "买家已付款";
						stateTipColor = "red";
						break;
					case 3:
						stateTip = "待收货";
						stateTipColor = "red";
						break;
					case 4:
						stateTip = "已完成";
						break;
					case 5:
						stateTip = "交易成功";
						break;
					case 6:
						stateTip = "已完成";
						break;
					case 7:
						stateTip = "订单已关闭";
						stateTipColor = "red";
						break;
						//更多自定义
				}
				return {
					stateTip,
					stateTipColor,
				};
			},
			getRefund(status) {
				return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][
					status
				];
			},
			// 修改地址
			editAddress(id, order) {
				this.$wanlshop.to('/pages/user/address/address?source=2&order_id=' + id);
			},
			//添加或修改成功之后回调
			async refreshList(address_id, order_id) {
				uni.showLoading({
					title: "正在提交新地址",
				});
				// 获取列表
				this.$api.post({
					url: "/wanlshop/order/editOrderAddress",
					data: {
						id: order_id,
						address_id: address_id,
					},
					success: (res) => {
						this.$wanlshop.msg("地址修改成功");
						uni.hideLoading();
					},
				});
			},
		},
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background: #f6efe9 !important;
	}

	.list-scroll-content {
		padding: 10px;
	}

	.tab-content:last-child {
		.list-scroll-content:last-child {
			padding: 0;
		}
	}

	// .list-scroll-content:first {
	//   padding-left: 10px;
	// }
	.btn-container {
		display: flex;
		justify-content: flex-end;

		button {
			border-radius: 50px;
			height: 60rpx !important;
			display: flex;
			align-items: center;
		}

		button::after {
			border: none;
		}
	}

	.wanl-order-list .navbar {
		white-space: nowrap;
	}

	.wanl-order-list .navbar .nav-item {
		padding: 15px;
	}

	.wanl-order-list .xl {
		width: 150rpx;
		height: 150rpx;
	}



	.look-detail {
		background-color: $theme;
		box-sizing: border-box;
		color: #fff;
		font-size: 3.2vw;
		font-weight: normal;
		margin: 0 1vw;
		border-radius: 52.53vw;
	}

	// .uni-countdown ::v-deep .uni-countdown__number {
	//   color: #aaa !important;
	//   font-size: 24rpx !important;

	//   line-height: 100rpx;
	// }

	.uni-countdown ::v-deep .uni-countdown__splitor {
		color: #aaa !important;
		font-size: 24rpx !important;
	}

	.margin-bgg {
		color: white;
		font-size: 3.2vw;
		font-weight: normal;
		margin: 0 important !important;

		height: 7.2vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.margin-bg {
		border: 2rpx solid $theme;
		background-color: $theme;
		color: white;
		font-size: 3.2vw;
		font-weight: normal;
		margin: 0 1vw;
		border-radius: 52.53vw;
	}

	.wanl-order-list .order-item {
		display: flex;
		flex-direction: column;
		padding-left: 25rpx;
		background: #fff;
		margin-top: 25rpx;

		.goods-box {
			.cu-avatar {
				background-repeat: no-repeat;
			}
		}
	}

	.action-box {
		button {
			display: flex;
			align-items: center;
			font-size: 26rpx;
		}

		button::after {
			border: none;
		}
	}

	.model-box {
		padding: 60rpx;
	}
</style>